<template>
  <div class="msg">
    <div
      class="itema"
      v-for="(item,index) in msgInfo"
      :key="index"
    >
      <div class="ava">
        <img
          :src="item.fromUser.avatarUrl"
          v-if="item.newMsgCount===0"
        >
        <el-badge
          :value="item.newMsgCount"
          class="item"
          v-if="item.newMsgCount!==0"
        >
          <img :src="item.fromUser.avatarUrl">
        </el-badge>

      </div>
      <div class="cont">
        <div class="sec1">
          <div class="mn">
            <a href="#">{{item.fromUser.nickname}}</a>
          </div>
          <div class="times">{{lastMsgTime | dateFormat}}&nbsp;<i class="iconfont"></i></div>
        </div>
        <div class="sec2 f-thide">
          <p class="f-thide">
            <pre>{{item.lastMsg.msg}}</pre>
          </p>
          <div class="oper"><a href="#">删除</a></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
// import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  data () {
    return {
      msgInfo: [],
      msgCount: 0
    }
  },
  created () {
    this.getmsg()
  },

  methods: {
    async getmsg () {
      console.log('私信信息')
      let res = await axios.get('https://autumnfish.cn//msg/private?limit=30')
      console.log(res)
      this.msgCount = res.data.newMsgCount
      this.msgInfo = res.data.msgs
      for (let i = 0; i < res.data.msgs.length; i++) {
        this.msgInfo[i].lastMsg = JSON.parse(this.msgInfo[i].lastMsg)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.msg {
  margin-bottom: 40px;
  margin-top: 1px;
  .itema {
    cursor: pointer;
    padding: 16px 0;
    border-bottom: 1px dotted #ccc;
    display: flex;
    justify-content: left;
    align-items: center;
    .ava {
      width: 50px;
      height: 50px;
      img {
        width: 50px;
        height: 50px;
      }
    }
    .cont {
      width: 100%;
      margin-left: 20px;
      line-height: 21px;
      .sec1 {
        width: 90%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .times {
          color: #999;
          font-size: 12px;
          .iconfont {
            margin: -4px 8px 0 2px;
            display: inline-block;
            width: 13px;
            height: 13px;
            background-image: url(../../assets/image/icon.png);
            background-position: -18px -682px;
          }
        }
        .mn {
          width: 100px;
          a {
            font-size: 14px;
            font-weight: bold;
          }
        }
      }
      .sec2 {
        width: 90%;
        margin-top: 3px;
        color: #999;
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
          width: 80%;
          font-size: 12px;
          height: 27px;
          // margin-right: 20px;
        }
        .oper {
          a {
            color: #0c73c2;
            font-size: 12px;
          }
        }
      }
    }
  }
  .item:hover {
    background: #f5f5f5;
  }
}
</style>
